<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <message />
              </el-icon>首页
            </template>
            <el-menu-item
              v-for="(item,index) in roues"
              :key="index"
              @click="lu(item)"
            >{{ item.title }}</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <icon-menu />
              </el-icon>地图
            </template>
            <el-menu-item
              v-for="(item,index) in roupaths"
              :key="index"
              @click="lus(item)"
            >{{ item.title }}</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <setting />
              </el-icon>用户
            </template>
            <el-menu-item
              v-for="(item,index) in pathrous"
              :key="index"
              @click="luss(item)"
            >{{ item.title }}</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>
                  <button @click="tui">退出登录</button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="ioms">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index"  :to="{ path:item.path }">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <span>
            {{userpo}}
            <img src="../assets/logo.svg" style="width: 20px; height:20px;" alt="">
            </span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import router from "@/router";
const item = {
  date: "2016-05-02",
  name: "Tom",
  address: "No. 189, Grove St, Los Angeles"
};
const tableData = ref(Array.from({ length: 20 }).fill(item));
const tui = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("obj");
  router.push("/login");
  console.log("退出登录");
};
// 首页数据
const rouins = JSON.parse(localStorage.getItem("obj") as string)?.path;
const roues = ref<any>(rouins);
// 1
const roupath = JSON.parse(localStorage.getItem("obj") as string)?.paths;
const roupaths = ref<any>(roupath);
//
const roupathse = JSON.parse(localStorage.getItem("obj") as string)?.pathes;
const pathrous = ref<any>(roupathse);
const lu = (item: any) => {
  router.push(item.path);
};
const lus = (item: any) => {
  router.push(item.path);
};
const luss = (item: any) => {
  router.push(item.path);
};
const userdata=JSON.parse(localStorage.getItem('obj') as string)?.username
const userpo=ref<any>(userdata)
</script>

<style scoped>
.layout-container-demo {
  width: 100%;
  height: 600px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.ioms {
  position: absolute;
  left: 0%;
}
</style>
